<template>
	<view class="profile">
		<view class="nav-bar" :style="`padding-top: ${statusBarHeight}px;`">个人中心</view>
		<view class="user-info" v-if="userStore.hasToken">
			<image class="avatar" mode="aspectFill" :src="userStore.userInfo.head_img || '/static/default-avatar.png'" />
			<view class="center">
				<view class="nickname">{{ userStore.userInfo.username || '用户***' }}</view>
				<view class="role">{{ userStore.role }}</view>
			</view>
			<image class="setting-icon" src="/static/profile/settings.png" @click="navigateTo('settings')" />
		</view>
		<view class="user-info" v-else @click="toLogin">
			<image class="avatar" mode="aspectFill" src="/static/default-avatar.png" />
			<view class="center">
				<view class="nickname">请登录</view>
			</view>
		</view>
		<view class="navigation-list">
			<view v-for="i of navgationList" :key="i.code" class="navigation-item" hover-class="hover-default" @click="navigateTo(i.code,i.auth)">
				<image class="nav-icon" :src="`/static/profile/${i.icon}.png`" />
				<view class="nav-label">{{ i.name }}</view>
				<image class="arrow-right-icon" src="/static/arrow-right.png" />
			</view>
		</view>
	</view>
</template>

<script setup>
import { useUserStore } from '@/store/user';
import { previewImage } from '@/utils';
import { navgationList } from './useProfile';

const userStore = useUserStore();
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;

function navigateTo(route,auth = false) {
	if (!uni.getStorageSync('token') && auth) {
		uni.showModal({
			title: '温馨提示',
			content: '您还未登录，前往登录',
			confirmColor: '#377DFF',
			success(res) {
				res.confirm &&
					uni.navigateTo({
						url: '/pages/login/silentAuth/index'
					});
			}
		});
	} else {
		let url = `./${route}/index`;
		route === 'privacyAgreement' && (url += '?id=5');
		route === 'disclaimer' && (url = './privacyAgreement/index?id=2');
		uni.navigateTo({ url });
	}
}

const toLogin = () => {
	uni.navigateTo({
		url: '/pages/login/silentAuth/index'
	});
};
</script>

<style scoped lang="scss">
.profile {
	min-height: 100vh;
	background-image: url('/static/login/bg.png');
	background-size: 100%;
	background-repeat: no-repeat;
	background-color: #f9faff;
	display: flex;
	flex-direction: column;
	.nav-bar {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333;
		font-size: 34rpx;
		font-weight: bold;
	}
	.user-info {
		height: 170rpx;
		display: flex;
		align-items: center;
		column-gap: 30rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			flex-shrink: 0;
		}
		.center {
			flex: 1;
			.nickname {
				color: #333;
				font-size: 34rpx;
				font-weight: bold;
				@include ellipsis();
			}
			.role {
				font-size: 26rpx;
				color: #444;
			}
		}
		.setting-icon {
			width: 48rpx;
			height: 44rpx;
			flex-shrink: 0;
		}
	}
	.navigation-list {
		flex: 1;
		overflow: hidden;
		background-color: #fff;
		border-top-left-radius: 80rpx;
		border-top-right-radius: 80rpx;
		.navigation-item {
			height: 132rpx;
			display: flex;
			column-gap: 28rpx;
			align-items: center;
			padding-left: 30rpx;
			padding-right: 30rpx;
			position: relative;
			.nav-icon {
				width: 72rpx;
				height: 72rpx;
				flex-shrink: 0;
			}
			.nav-label {
				flex: 1;
				color: #333;
				font-weight: bold;
			}
			.arrow-right-icon {
				width: 36rpx;
				height: 36rpx;
				flex-shrink: 0;
			}
			& + .navigation-item::after {
				content: '';
				position: absolute;
				right: 30rpx;
				left: 30rpx;
				top: 0;
				border-top: 2rpx solid #f9f9f9;
			}
		}
	}
}
</style>
